<template>
  <view class="container">
    <!-- 背景图 -->
    <image class="home-img" src="@/static/images/home_bg.png" mode="aspectFill" />

    <!-- 卡片图，点击跳转 -->
    <image
      class="next-img"
      src="@/static/images/home_card.png"
      mode="widthFix"
      @tap="goAudioPage"
      v-if="isNfc"
    />
  </view>
</template>

<script>
export default {
  onLoad() {
    const url = window.location.href;
    const urlObj = new URL(url);
    const params = new URLSearchParams(urlObj.search);
    this.isNfc = (params.get('source') == 'NFC');
  },
  data() {
    return {
      isNfc: null
    };
  },
  methods: {
    goAudioPage() {
      // 在用户交互时立即播放音频，绕过 iOS 限制
      // 这里调用全局音频管理器，在用户点击的上下文中开始播放
      if (this.$audioManager) {
        this.$audioManager.play();
      }
      
      // 跳转到音频页面
      uni.navigateTo({
        url: '/pages/audio/index',
      });
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.container {
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  position: relative;
}

.home-img {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
}

.next-img {
  display: block;
  width: 100%;
  height: 1184rpx;
  position: relative;
  z-index: 1;
  opacity: 0;
  transform: translateY(-300rpx);
  animation: dropSmooth 1.8s ease-out forwards;
}

/* 动画关键帧 */
@keyframes dropSmooth {
  0% {
    opacity: 0;
    transform: translateY(-300rpx);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
